<template>
  <div class="width hello">
    <nav>
        <a class="nav-zuo" href="#/">
            <i class="fa fa-angle-left"></i>
        </a>
        购物车
    </nav>
    
    <div v-if="datas.length <= 0" class="wie">
      <img src="//st01.fn-mart.com/mstatics/assets/img/v2/cart/null.png" alt="">
      <p>您的购物车内还没有任何商品</p>
      <a href="#/">逛逛秒杀</a>
    </div>
    <div v-else class="content">
      <section  v-for="(data,index) in datas">
        <div class="enen">
          <!--<input @click="dians" class="left" type="radio" >-->
          <div class="jiaqian" @click='jiaqian(index)'>
            <i class="fa fa-circle-o" v-if="!data.xuan"></i>
            <i class="fa fa-check-circle checked" v-if="data.xuan"></i>
          </div>
          <div class="img">
            <img :src="`http://localhost:2222/images/photos/${data.productImage}`" alt="">
          </div>
          <div class="right">
            <p class="p1">{{data.productName}}
              <span @click="remove" :taret="`${data.productId}`"  class="remo" v-model="show">删除</span>
               </p>
            <p class="p2">{{data.describe}}</p>
            <div  class="div1">
              ¥{{data.yuanPrice}}
              <span class="span1">¥{{data.salePrice}}</span>
              <span class="span2">
                <i @click="editCart('minu',data)">-</i>
                x{{data.productNum}}
                <i @click="editCart('add',data)">+</i>
                </span>
            </div>
          </div>
        </div>
        <div class="fen" style="padding:5px"></div>
        </section>
    </div>
    <section>
      <!--<input class="input" type="checkbox"><span class="xuan">全选</span>-->
      <div class="chooseAll" @click="chooseAll">
        <i class="fa fa-circle-o" v-if="!isChooseAll">全选</i>
        <i class="fa fa-check-circle checked" v-if="isChooseAll">全不选</i>
      </div>
      <div>合计: <span>¥ {{total}}</span>&#x3000 <a @click.prevent="sure" class="span">结算</a> </div>
    </section>
  </div>
</template>
<script>
    import axios from 'axios'
  // import { XInput, Group, XButton, Cell } from 'vux'
  import { Group, CellBox, Checklist, Cell, Divider, XButton } from 'vux'
  
  export default{
      components: {
    Group,
    Checklist,
    Cell,
    Divider,
    XButton,
    CellBox
  },
    data:function(){
      return {
        datas:{},
        inx:0,
        show:'',
        dui:false,
        numm:0,
        isChooseAll:false,
      }
    },
    mounted:function(){

        var that = this;
        axios.get('los/shopcart').then(function(data){
                that.datas = data.data.message.cart;
                // console.log('12',data.data.message)
        }).catch(function(err){
            console.log(data.data.message);
        })

    },
    
    methods:{
      editCart:function(flag,item){
        if(flag == 'add'){
          item.productNum++;
        }else if(flag=='minu'){
          if(item.productNum <= 1){
            return;
          }
          item.productNum--;
        }else{
          item.xuan = item.xuan == '1' ? '0' : '1';
        }
        axios.post('los/cartEdit',{
          productId:item.productId,
          productNum:item.productNum,
          xuan:item.xuan
        }).then((result)=>{
          let res =result.data;
          if(res.status == '0'){
            this.$store.commit('updateCartCount',flag == 'add' ? 1 : -1);
          }
        })
      },
      remove:function(ev){

        var haa = $(ev.currentTarget).attr('taret')
          // console.log(haa)
        axios.get(`los/remove?id=${haa}`)
        .then(function(data){
            location.reload();
        }).catch(function(err){
        })
      },
 
      jiaqian:function(index){
        this.datas.forEach((data,ins)=>{
          if(index == ins){
            data.xuan = !data.xuan
          }
        });
        this.isCheckedAll();
      },
      // 
      isCheckedAll:function(){
        let checked = false;
        for(let i = 0; i < this.datas.length;i++){
          if(this.datas[i].xuan == false){
            checked = false;
            break;
          }else{
            checked =true;
          }
        }
        if(checked){
          this.isChooseAll = true
        }else{
          this.isChooseAll = false
        }
      },
      // 
      chooseAll:function(){
        if(this.isChooseAll == true){
          this.datas.forEach((data)=>{
            data.xuan = false;
          })
          this.isChooseAll = false;
          return;
        }
        if(this.isChooseAll == false){
          this.datas.forEach((data)=>{
            data.xuan = true;
          })
          this.isChooseAll = true;
        }
      },
       sure:function(){
          // ev.preventDefault();
          let arr = [];
          this.datas.forEach((data) =>{
              if(data.xuan == true){
                  arr.push(data);
              }else{
                 console.log('没选中');
              }
          });
          axios.post('los/sure',{arr:arr}).then((resData) =>{
           console.log(resData.data.message);
            if(resData.data.message.length == 0){
                alert('没有选购商品~~~');
            }else{
              location.href = '/#/goumai';
            }
          }).catch((err) =>{
            console.log(err);
          })
      }
    },
    computed:{
      total:function(){
         let inx = 0;
         console.log(this.datas)
          this.datas.forEach(function(data) {
          if(data.xuan == true){
            inx += data.yuanPrice * data.productNum;
          }
        })
        return inx;
      }
    },
   
  }
</script>
<style scoped>
  .span2 > i{
    font-style: normal;
    display: inline-block;
    background: #fff;
    width: 20px;
    text-align: center;
  }
  .remo{
    float: right;
    color: #cc0000;
  }
  .width > section{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 45px;
    overflow: hidden;
    padding-left: 10px;
    font-size: 14px;
    border-top: 1px solid #ccc;
    background: #fff;
  }
  .width > section > div{
    float: right;
  }
  .chooseAll{
    position: absolute;
  }
  .width > section > div > span{
    color: #cc0000;
  }
  .width > section > div > .span{
    background: #cc0000;
    color: #fff;
    height: 100%;
    display:inline-block;
    padding: 0 20px;
  }
  .width > section > input{
    margin-right: 5px;
  }
  .fen{
    padding: 5px;
    background: #ddd;
  }
  .div1{
    color: #cc0000;
    font-size: 16px;
  }
  .span1{
    color: #aaa;
    text-decoration:line-through;
    font-size: 12px;
  }
  .span2{
    float: right;
    color: #333;
    font-size: 14px;
  }
  .p1{
    font-size: 14px;
  }
  .p2{
    font-size: 12px;
    width: 200px;
    line-height: 30px;
  }
  .img{
    width: 25%;
    float: left;
    margin-right: 15px;
  }
  .img > img{
    width: 100%;
  }
  .enen{
    overflow: hidden;
    padding: 5px;
    background: rgba(255, 218, 185, .3);
    height: 100px;
  }
  .right{
    float: left;
  }
  .jiaqian{
    float: left;
    margin-right: 10px;
    margin-top: 30px;
  }
  .content{
    margin-top: 45px;
  }
  .wie{
    margin-top: 45px;
    text-align: center;
  }
  .wie img{
    width: 80%;
  }
  .wie p{
    color: #333;
    margin: 10px; 
  }
  .wie a{
    display: block;
    background: #F08080;
    color: #fff;
    width: 90%;
    margin: 30px auto 0;
    border-radius: 5px;
    line-height: 30px;
  }
  nav{
    background: #EE6363;
    text-align: center;
    color: #fff;
    line-height: 45px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  nav a{
    position: absolute;
    left: 20px;
    font-size: 28px;
    color: #fff;
    top: -3px;;
  }
  
</style>